<template>
    <div v-if="filmInfo">
        <detail-header v-scroll="50">
            {{filmInfo.name}}
        </detail-header>
        <!-- <img :src="filmInfo.poster" alt=""> -->
        <div :style="{
            backgroundImage:'url('+filmInfo.poster+')'
        }" class="poster"></div>
        <div class="content">
            <div>{{filmInfo.name}}</div>
            <div class="content-bottom">
                <div class="detail-text">{{filmInfo.category}}</div>
                <div class="detail-text">{{filmInfo.premiereAt | dateFilter}}</div>
                <div class="detail-text">{{filmInfo.nation}} |{{filmInfo.runtime}}分钟</div>
                <div class="detail-text" style="
                line-height:15px;" :class="isHidden?'hidden':''">{{filmInfo.synopsis}}</div>
                <div style="text-align:center" @click="isHidden=!isHidden">﹀</div>
            </div>
            <div>
            <div>演职人员</div>
            <detail-swiper :perview="3.5" name="actors">
                <detail-swiper-item v-for="(data,index) in filmInfo.actors" :key="index">
                    <div :style="{
            backgroundImage: 'url(' + data.avatarAddress + ')'
        }" class="avatar"></div>
                    <!-- <img :src="data.avatarAddress" alt=""> -->
                    <div style="text-align:center;font-size:12px">{{data.name}}</div>
                    <div style="text-align:center;font-size:13px">{{data.role}}</div>
                </detail-swiper-item>
            </detail-swiper>
            </div>
             <div>
            <div v-if="filmInfo.photos">剧照</div>
            <detail-swiper v-if="filmInfo.photos" :perview="2" name="photos">
                <detail-swiper-item v-for="(data,index) in filmInfo.photos" :key="index">
                    <div :style="{
            backgroundImage: 'url(' + data + ')'
        }" class="avatar" @click="handlePreview(index)"></div>
                    <!-- <img :src="data.avatarAddress" alt=""> -->
                    <!-- <div style="text-align:center;font-size:12px">{{data.name}}</div> -->
                    <!-- <div style="text-align:center;font-size:13px">{{data.role}}</div> -->
                </detail-swiper-item>
            </detail-swiper>
            <div v-else>暂无剧照</div>
            </div>
        </div>    
    </div>
</template>
<script>
import axios from 'axios'
import moment from 'moment'
import Vue from 'vue'
import detailSwiper from '@/components/detail/DetailSwiper'
import detailSwiperItem from '@/components/detail/DetailSwiperItem'
import detailHeader from '@/components/detail/DetailHeader'
import { ImagePreview } from 'vant';

moment.locale('zh-cn') //设置成中文

Vue.filter('dateFilter',(date) =>{
    return moment(date * 1000).format('YYYY-MM-DD')
})
Vue.directive("scroll",{
    inserted(el,binding){
        // console.log(el);
        el.style.display = 'none'
        window.onscroll = () =>{
            console.log('scroll');
            if((document.documentElement.scrollTop || document.body.scrollTop) >binding.value){
                el.style.display ='block'
            } else el.style.display = 'none'
        }
    },
    unbind (){
        window.onscroll = null
    }
})
export default {
    data () {
        return {
            filmInfo: null,
            isHidden: true
        }
    },
    components: {
        detailSwiper,
        detailSwiperItem,
        detailHeader
    },
    methods:{
        handlePreview(index){
            ImagePreview({
                images:this.filmInfo.photos,
                startPosition:index,
                closeable:true
            });
        }
    },
    created(){
        
        console.log("created",this.$route.params.id);
        //axios利用id发送详情接口，获取详情数据，布局页面
        axios({
            url:`https://m.maizuo.com/gateway?filmId=${this.$route.params.id}&k=4001208`,
            headers:{
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"1642648622150680337645569"}',
        'X-Host': 'mall.film-ticket.film.info'}
            }).then(res=>{
                console.log(res.data)
                this.filmInfo = res.data.data.film
                //隐藏
            // Toast.clear()
            })
        },
        mounted(){
        window.onscroll = () => {
            console.log('scroll');
            if(document.documentElement.scrollTop > 50) {
                console.log('显示') }
                else {
                    console.log('隐藏')
                }
            }
        },
        destroyed (){
            window.onscroll = null
        }
    }
</script>
<style lang="scss" scoped>
.poster{
    width: 100%;
    height: 11.6667rem;
    background-position: center;
    background-size: cover;
}
.content{
    padding: .8333rem;
    .detail-text{
        color:#797d82;
        font-size: 13px;
        margin-top: .2222rem;
    }
}
.hidden{
    overflow: hidden;
    height:30px;
}
.avatar{
    width: 100%;
    height: 4.7222rem;
    background-position: center;
    background-size: cover;
}
</style>